<template>
  <div style="background: #0c1430; height: 100vh;">
    <div class="index-contents">
      <el-tabs v-model="indexTab" type="border-card" @tab-click="tabEcharts">
        <el-tab-pane label="综合报表" name="first">
          <div class="charts-wrap">
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common second" style="background-color: gray;">
                  <div class="workshop-title">工厂点检完成率</div>
                  <div id="echartsIndex1" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent1.number1 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">冲压车间点检完成率</div>
                  <div id="echartsIndex2" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent1.number2 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">车身车间点检完成率</div>
                  <div id="echartsIndex3" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent1.number3 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">涂装车间点检完成率</div>
                  <div id="echartsIndex4" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent1.number4 }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">总装车间点检完成率</div>
                  <div id="echartsIndex5" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent1.number5 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">生产管理部点检完成率</div>
                  <div id="echartsIndex6" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent1.number6 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">质量部点检完成率</div>
                  <div id="echartsIndex7" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent1.number7 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">设备动力部点检完成率</div>
                  <div id="echartsIndex8" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent1.number8 }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px;">
              <el-col :span="16">
                <div class="workshop-charts-common">
                  <div class="workshop-title">设备可动率</div>
                  <div class="right-icon" @click="searchCharts('indexCharts9', '设备可动率')"><i class="el-icon-crop" /></div>
                  <div id="echartsIndex9" class="workshop-charts" style="height: 300px;" />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="workshop-charts-common">
                  <div class="workshop-title">停线时间&次数</div>
                  <div class="right-icon" @click="searchCharts('indexCharts10', '停线时间&次数')"><i class="el-icon-crop" /></div>
                  <div id="echartsIndex10" class="workshop-charts" style="height: 300px;" />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="自主保全" name="second">
          <div class="charts-wrap">
            <div style="text-align: left;font-size: 20px;padding-top:10px;box-sizing: border-box;padding-left: 10px;">自主点检</div>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common second" style="background-color: gray;">
                  <div class="workshop-title">工厂自主点检完成率</div>
                  <div id="echartsSecond1" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent2.number1 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">冲压车间自主点检完成率</div>
                  <div id="echartsSecond2" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent2.number2 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">车身车间自主点检完成率</div>
                  <div id="echartsSecond3" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent2.number3 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">涂装车间自主点检完成率</div>
                  <div id="echartsSecond4" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent2.number4 }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">总装车间自主点检完成率</div>
                  <div id="echartsSecond5" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent2.number5 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">生产管理部自主点检完成率</div>
                  <div id="echartsSecond6" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent2.number6 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">质量部自主点检完成率</div>
                  <div id="echartsSecond7" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent2.number7 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">设备动力部自主点检完成率</div>
                  <div id="echartsSecond8" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent2.number8 }}</div>
                </div>
              </el-col>
            </el-row>
            <div style="text-align: left;font-size: 20px;padding-top:10px;box-sizing: border-box;padding-left: 10px;">自主维护</div>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common second" style="background-color: gray;">
                  <div class="workshop-title">工厂自主维护完成率</div>
                  <div id="echarts2Second1" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent3.number1 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">冲压车间自主维护完成率</div>
                  <div id="echarts2Second2" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent3.number2 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">车身车间自主维护完成率</div>
                  <div id="echarts2Second3" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent3.number3 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">涂装车间自主维护完成率</div>
                  <div id="echarts2Second4" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent3.number4 }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">总装车间自主点检完成率</div>
                  <div id="echarts2Second5" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent3.number5 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">生产管理部自主点检完成率</div>
                  <div id="echarts2Second6" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent3.number6 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">质量部自主点检完成率</div>
                  <div id="echarts2Second7" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent3.number7 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">设备动力部自主点检完成率</div>
                  <div id="echarts2Second8" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent3.number8 }}</div>
                </div>
              </el-col>
            </el-row>
            <div style="text-align: left;font-size: 20px;padding-top:10px;box-sizing: border-box;padding-left: 10px;">报修统计</div>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common re second" style="background-color: gray;">
                  <div class="workshop-title">工厂报修</div>
                  <div id="echarts3Second1" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ second.number1 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">冲压车间报修</div>
                  <div id="echarts3Second2" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ second.number2 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">车身车间报修</div>
                  <div id="echarts3Second3" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ second.number3 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">涂装车间报修</div>
                  <div id="echarts3Second4" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ second.number4 }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px;">
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">总装车间报修</div>
                  <div id="echarts3Second5" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ second.number5 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">生产管理部自报修</div>
                  <div id="echarts3Second6" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ second.number6 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">质量部报修</div>
                  <div id="echarts3Second7" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ second.number7 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">设备动力部报修</div>
                  <div id="echarts3Second8" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ second.number8 }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="专业保全" name="third">
          <div class="charts-wrap">
            <div style="text-align: left;font-size: 20px;padding-top:10px;box-sizing: border-box;padding-left: 10px;">专业点检</div>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common second" style="background-color: gray;">
                  <div class="workshop-title">工厂专业点检完成率</div>
                  <div id="echartsThird1" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent4.number1 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">冲压车间专业点检完成率</div>
                  <div id="echartsThird2" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent4.number2 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">车身车间专业点检完成率</div>
                  <div id="echartsThird3" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent4.number3 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">涂装车间专业点检完成率</div>
                  <div id="echartsThird4" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent4.number4 }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">总装车间专业点检完成率</div>
                  <div id="echartsThird5" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent4.number5 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">生产管理部专业点检完成率</div>
                  <div id="echartsThird6" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent4.number6 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">质量部专业点检完成率</div>
                  <div id="echartsThird7" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent4.number7 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">设备动力部专业点检完成率</div>
                  <div id="echartsThird8" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent4.number8 }}</div>
                </div>
              </el-col>
            </el-row>
            <div style="text-align: left;font-size: 20px;padding-top:10px;box-sizing: border-box;padding-left: 10px;">专业维护</div>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common second" style="background-color: gray;">
                  <div class="workshop-title">工厂专业维护完成率</div>
                  <div id="echarts2Third1" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent5.number1 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">冲压车间专业维护完成率</div>
                  <div id="echarts2Third2" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent5.number2 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">车身车间专业维护完成率</div>
                  <div id="echarts2Third3" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent5.number3 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">涂装车间专业维护完成率</div>
                  <div id="echarts2Third4" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent5.number4 }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">总装车间专业维护完成率</div>
                  <div id="echarts2Third5" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent5.number5 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">生产管理部专业维护完成率</div>
                  <div id="echarts2Third6" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent5.number6 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">质量部专业维护完成率</div>
                  <div id="echarts2Third7" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent5.number7 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common second">
                  <div class="workshop-title">设备动力部专业维护完成率</div>
                  <div id="echarts2Third8" class="workshop-charts" style="height: 300px;" />
                  <div class="ab">{{ numberPercent5.number8 }}</div>
                </div>
              </el-col>
            </el-row>
            <div style="text-align: left;font-size: 20px;padding-top:10px;box-sizing: border-box;padding-left: 10px;">维修统计</div>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common re second" style="background-color: gray;">
                  <div class="workshop-title">工厂维修</div>
                  <div id="echarts3Third1" class="workshop-charts" style="height: 300px;" />
                  <div class="abs">{{ third.number1 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">冲压车间维修</div>
                  <div id="echarts3Third2" class="workshop-charts" style="height: 300px;" />
                  <div class="abs">{{ third.number2 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">车身车间维修</div>
                  <div id="echarts3Third3" class="workshop-charts" style="height: 300px;" />
                  <div class="abs">{{ third.number3 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">涂装车间维修</div>
                  <div id="echarts3Third4" class="workshop-charts" style="height: 300px;" />
                  <div class="abs">{{ third.number4 }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">总装车间维修</div>
                  <div id="echarts3Third5" class="workshop-charts" style="height: 300px;" />
                  <div class="abs">{{ third.number5 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">生产管理部自维修</div>
                  <div id="echarts3Third6" class="workshop-charts" style="height: 300px;" />
                  <div class="abs">{{ third.number6 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">质量部维修</div>
                  <div id="echarts3Third7" class="workshop-charts" style="height: 300px;" />
                  <div class="abs">{{ third.number7 }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="workshop-charts-common re second">
                  <div class="workshop-title">设备动力部维修</div>
                  <div id="echarts3Third8" class="workshop-charts" style="height: 300px;" />
                  <div class="abs">{{ third.number8 }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px;">
              <el-col :span="16">
                <div class="workshop-charts-common">
                  <div class="workshop-title">故障十项分析</div>
                  <div class="right-icon" @click="searchCharts('thirdChartsB1', '故障十项分析')"><i class="el-icon-crop" /></div>
                  <div id="echartsThirdB1" class="workshop-charts" style="height: 300px;" />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="workshop-charts-common">
                  <div class="workshop-title">预防维护工时（专业维护）</div>
                  <div class="right-icon" @click="searchCharts('thirdChartsB2', '预防维护工时（专业维护）')"><i class="el-icon-crop" /></div>
                  <div id="echartsThirdB2" class="workshop-charts" style="height: 300px;" />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="备件管理" name="fourth">
          <div class="charts-wrap">
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
              <el-col :span="12">
                <div class="workshop-charts-common">
                  <div class="workshop-title">TOP10消费备件</div>
                  <div class="right-icon" @click="searchCharts('partsCharts1', 'TOP10消费备件')"><i class="el-icon-crop" /></div>
                  <div id="echartsParts1" class="workshop-charts" style="height: 300px;" />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="workshop-charts-common">
                  <div class="workshop-title">备件采购报表</div>
                  <div class="right-icon" @click="searchCharts('partsCharts2', '备件采购报表')"><i class="el-icon-crop" /></div>
                  <div id="echartsParts2" class="workshop-charts" style="height: 300px;" />
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px;">
              <el-col :span="12">
                <div class="workshop-charts-common">
                  <div class="workshop-title">备件入库报表</div>
                  <div class="right-icon" @click="searchCharts('partsCharts3', '备件入库报表')"><i class="el-icon-crop" /></div>
                  <div id="echartsParts3" class="workshop-charts" style="height: 300px;" />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="workshop-charts-common">
                  <div class="workshop-title">备件出库报表</div>
                  <div class="right-icon" @click="searchCharts('partsCharts4', '备件出库报表')"><i class="el-icon-crop" /></div>
                  <div id="echartsParts4" class="workshop-charts" style="height: 300px;" />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-dialog :title="titleText" :visible.sync="dialogTableVisible" width="75%" center :destroy-on-close="true" @open="open()" @close="close()">
        <div id="c">
          <div class="condition">
            <div class="select-div">
              <div :hidden="cIndex9">
                <div class="select-div">车间：</div>
                <div class="select-div">
                  <el-select v-model="searchIndex9.workshop" size="mini">
                    <el-option v-for="(item, chartsWorkShop9) in chartsWorkShop" :key="chartsWorkShop9" :label="item" :value="chartsWorkShop9" />
                  </el-select>
                </div>
              </div>
              <div :hidden="cIndex10">
                <div class="select-div">
                  <div class="select-div">筛选周期：</div>
                  <div class="select-div">
                    <el-date-picker v-model="searchIndex10.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
                  </div>
                </div>
                <div class="select-div ml10">
                  <div class="select-div">车间：</div>
                  <div class="select-div">
                    <el-select v-model="searchIndex10.workshop" size="mini" @change="factoryChange10">
                      <el-option v-for="(item,workshopIndex10) in planWorkshop" :key="workshopIndex10" :label="item" :value="workshopIndex10" />
                    </el-select>
                  </div>
                </div>
                <div class="select-div ml10">
                  <div class="select-div">班组：</div>
                  <div class="select-div" style="width: 110px;">
                    <v-select v-model="searchIndex10.member" action="classByFactory" :query="{factory: searchIndex10.workshop}" multiple />
                  </div>
                </div>
              </div>
              <div :hidden="cThirdB1">
                <div class="select-div">
                  <div class="select-div">筛选周期：</div>
                  <div class="select-div">
                    <el-date-picker v-model="searchThirdB1.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" />
                  </div>
                </div>
                <div class="select-div ml10">
                  <div class="select-div">车间：</div>
                  <div class="select-div">
                    <el-select v-model="searchThirdB1.workshop" size="mini">
                      <el-option v-for="(item, workshopIndex4) in planWorkshop" :key="workshopIndex4" :label="item" :value="workshopIndex4" />
                    </el-select>
                  </div>
                </div>
              </div>
              <div :hidden="cThirdB2">
                <div class="select-div">
                  <div class="select-div">筛选周期：</div>
                  <div class="select-div">
                    <el-date-picker v-model="searchThirdB2.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
                  </div>
                </div>
              </div>
              <div :hidden="cParts1">
                <div class="select-div">
                  <div class="select-div">筛选周期：</div>
                  <div class="select-div">
                    <el-date-picker v-model="searchParts1.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
                  </div>
                </div>
                <div class="select-div ml10">
                  <div class="select-div">车间：</div>
                  <div class="select-div">
                    <el-select v-model="searchParts1.workshop" size="mini">
                      <el-option v-for="(item,workshopIndex9) in chartsWorkShop" :key="workshopIndex9" :label="item" :value="workshopIndex9" />
                    </el-select>
                  </div>
                </div>
                <div class="select-div ml10">
                  <div class="select-div">排序：</div>
                  <div class="select-div">
                    <el-select v-model="searchParts1.sort" size="mini">
                      <el-option v-for="(item, cParts1Index) in priceSort" :key="cParts1Index" :label="item" :value="cParts1Index" />
                    </el-select>
                  </div>
                </div>
              </div>
              <div :hidden="cParts2" />
              <div :hidden="cParts3" />
              <div :hidden="cParts4" />
            </div>
            <div class="select-div ml10">
              <el-button type="primary" size="mini" @click="searchHandle1">搜索</el-button>
            </div>
          </div>
        </div>
        <div id="bigCharts" class="bigCharts" />
      </el-dialog>
    </div>
    <div class="footer">
      中国设备管理协会汽车智能制造技术中心 @2022-2023
    </div>
    <img src="@/assets/index/index-bg.jpg" width="100%" alt="" hidden />
  </div>
</template>

<script>
import API from '@/api/charts/charts'
import { planWorkshop, priceSort } from '@/utils/options'
import * as echarts from 'echarts'
import VSelect from '@/components/select'
import { mapGetters } from 'vuex'

export default {
  components: {
    VSelect
  },
  data() {
    return {
      indexTab: 'first',
      dialogTableVisible: false,
      titleText: '大报表',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      chartsWorkShop: ['工厂', '冲压车间', '车身车间', '涂装车间', '总装车间'],
      mttrWorkShop: ['工厂', '冲压保全班', '车身保全班', '涂装保全班', '总装保全班', '动力维修班'],
      mtbfWorkShop: [
        { i: 99, n: '工厂' },
        { i: 0, n: '冲压车间' },
        { i: 1, n: '车身车间' },
        { i: 2, n: '涂装车间' },
        { i: 3, n: '总装车间' }
      ],
      currentOpenIndex: null,
      planWorkshop,
      priceSort,
      // 首页类
      cIndex1: true,
      cIndex2: true,
      cIndex3: true,
      cIndex4: true,
      cIndex5: true,
      cIndex6: true,
      cIndex7: true,
      cIndex8: true,
      cIndex9: true,
      cIndex10: true,
      numberPercent1: {
        number1: 0,
        number2: 0,
        number3: 0,
        number4: 0,
        number5: 0,
        number6: 0,
        number7: 0,
        number8: 0
      },
      numberPercent2: {
        number1: 0,
        number2: 0,
        number3: 0,
        number4: 0,
        number5: 0,
        number6: 0,
        number7: 0,
        number8: 0
      },
      numberPercent3: {
        number1: 0,
        number2: 0,
        number3: 0,
        number4: 0,
        number5: 0,
        number6: 0,
        number7: 0,
        number8: 0
      },
      numberPercent4: {
        number1: 0,
        number2: 0,
        number3: 0,
        number4: 0,
        number5: 0,
        number6: 0,
        number7: 0,
        number8: 0
      },
      numberPercent5: {
        number1: 0,
        number2: 0,
        number3: 0,
        number4: 0,
        number5: 0,
        number6: 0,
        number7: 0,
        number8: 0
      },
      chartsIndex9Data: {
        categories: ['工厂', '指标'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        values: [
          {
            name: '工厂',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '指标',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      },
      searchIndex9: {
        workshop: 0
      },
      chartsIndex10Data: {},
      searchIndex10: {},
      queryWorkshop10: null,
      // 自主维护类
      second: {
        number1: 0,
        number2: 0,
        number3: 0,
        number4: 0,
        number5: 0,
        number6: 0,
        number7: 0,
        number8: 0
      },
      // 专业维护类
      third: {
        number1: 0,
        number2: 0,
        number3: 0,
        number4: 0,
        number5: 0,
        number6: 0,
        number7: 0,
        number8: 0
      },
      cThirdB1: true,
      cThirdB2: true,
      chartsThirdB1Data: {},
      searchThirdB1: {},
      chartsThirdB2Data: {
        categories: ['冲压', '车身', '涂装', '总装', '动力'],
        minute: [0, 0, 0, 0, 0, 0, 0]
      },
      searchThirdB2: {},
      // 备件类
      cParts1: true,
      cParts2: true,
      cParts3: true,
      cParts4: true,
      chartsParts1Data: {
        circle: [
          {
            name: '',
            value: 10
          },
          {
            name: '',
            value: 10
          },
          {
            name: '',
            value: 10
          }
        ]
      },
      searchParts1: {
        sort: 0
      },
      chartsParts2Data: {
        x: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      searchParts2: {},
      chartsParts3Data: {
        x: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      searchParts3: {},
      chartsParts4Data: {
        x: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      searchParts4: {}
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    // const self = this
    // window.setInterval(() => {
    //   setTimeout(() => {
    //     self.index1()
    //   }, 0)
    // }, 300000)
  },
  mounted() {
    this.index1()
  },
  methods: {
    index1() {
      // 首页类
      this.chartsIndex1()
      this.chartsIndex2()
      this.chartsIndex3()
      this.chartsIndex4()
      this.chartsIndex5()
      this.chartsIndex6()
      this.chartsIndex7()
      this.chartsIndex8()
      this.chartsIndex9()
      this.chartsIndex10()
      // 专业保全
    },
    index2() {
      // 自主保全类
      this.chartsSecond1()
      this.chartsSecond2()
      this.chartsSecond3()
      this.chartsSecond4()
      this.chartsSecond5()
      this.chartsSecond6()
      this.chartsSecond7()
      this.chartsSecond8()
      this.charts2Second1()
      this.charts2Second2()
      this.charts2Second3()
      this.charts2Second4()
      this.charts2Second5()
      this.charts2Second6()
      this.charts2Second7()
      this.charts2Second8()
      this.charts3Second1()
      this.charts3Second2()
      this.charts3Second3()
      this.charts3Second4()
      this.charts3Second5()
      this.charts3Second6()
      this.charts3Second7()
      this.charts3Second8()
    },
    index3() {
      this.chartsThird1()
      this.chartsThird2()
      this.chartsThird3()
      this.chartsThird4()
      this.chartsThird5()
      this.chartsThird6()
      this.chartsThird7()
      this.chartsThird8()
      this.charts2Third1()
      this.charts2Third2()
      this.charts2Third3()
      this.charts2Third4()
      this.charts2Third5()
      this.charts2Third6()
      this.charts2Third7()
      this.charts2Third8()
      this.charts3Third1()
      this.charts3Third2()
      this.charts3Third3()
      this.charts3Third4()
      this.charts3Third5()
      this.charts3Third6()
      this.charts3Third7()
      this.charts3Third8()
      this.chartsThirdB1()
      this.chartsThirdB2()
    },
    index4() {
      // 备件类
      this.chartsParts1()
      this.chartsParts2()
      this.chartsParts3()
      this.chartsParts4()
    },
    searchCharts(current, title) {
      this.dialogTableVisible = true
      this.titleText = title
      this.opens('bigCharts', current)
    },
    opens(s, current) {
      this.currentOpenIndex = current
      if (current === 'partsCharts1') {
        this.cParts1 = false
        this.$nextTick(() => {
          this.chartsParts1(s)
        })
      } else if (current === 'partsCharts2') {
        this.cParts2 = false
        this.$nextTick(() => {
          this.chartsParts2(s)
        })
      } else if (current === 'partsCharts3') {
        this.cParts3 = false
        this.$nextTick(() => {
          this.chartsParts3(s)
        })
      } else if (current === 'partsCharts4') {
        this.cParts4 = false
        this.$nextTick(() => {
          this.chartsParts4(s)
        })
      } else if (current === 'indexCharts9') {
        this.cIndex9 = false
        this.$nextTick(() => {
          this.chartsIndex9(s)
        })
      } else if (current === 'indexCharts10') {
        this.cIndex10 = false
        this.$nextTick(() => {
          this.chartsIndex10(s)
        })
      } else if (current === 'thirdChartsB1') {
        this.cThirdB1 = false
        this.$nextTick(() => {
          this.chartsThirdB1(s)
        })
      } else if (current === 'thirdChartsB2') {
        this.cThirdB2 = false
        this.$nextTick(() => {
          this.chartsThirdB2(s)
        })
      }
    },
    open() {},
    close() {
      // 首页类
      this.cIndex9 = true
      this.cIndex10 = true
      // 专业维护类
      this.cThirdB1 = true
      this.cThirdB2 = true
      // 备件类
      this.cParts1 = true
      this.cParts2 = true
      this.cParts3 = true
      this.cParts4 = true
    },
    searchHandle1() {
      // 首页类
      if (this.currentOpenIndex === 'indexCharts9') {
        this.chartsIndex9('bigCharts')
        this.chartsIndex9()
      } else if (this.currentOpenIndex === 'indexCharts10') {
        this.chartsIndex10('bigCharts')
        this.chartsIndex10()
      }
      // 备件类
      if (this.currentOpenIndex === 'partsCharts1') {
        this.chartsParts1('bigCharts')
        this.chartsParts1()
      } else if (this.currentOpenIndex === 'partsCharts2') {
        this.chartsParts2('bigCharts')
        this.chartsParts2()
      } else if (this.currentOpenIndex === 'partsCharts3') {
        this.chartsParts3('bigCharts')
        this.chartsParts3()
      } else if (this.currentOpenIndex === 'partsCharts4') {
        this.chartsParts4('bigCharts')
        this.chartsParts4()
      }
      // 专业维护类
      if (this.currentOpenIndex === 'thirdChartsB1') {
        this.chartsThirdB1('bigCharts')
        this.chartsThirdB1()
      } else if (this.currentOpenIndex === 'thirdChartsB2') {
        this.chartsThirdB2('bigCharts')
        this.chartsThirdB2()
      }
    },
    // 首页类
    chartsIndex1(chartDomAct = 'echartsIndex1') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.indexPmCharts().then(res => {
        const p = res.data.pf
        this.numberPercent1.number1 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#8f87ff', '#e2f0d9', '#ff717d', '#ffa427', '#5c95fe']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsIndex2(chartDomAct = 'echartsIndex2') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.indexPmCharts({ workshop: 0 }).then(res => {
        const p = res.data.pf
        this.numberPercent1.number2 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#8f87ff', '#e2f0d9', '#ff717d', '#ffa427', '#5c95fe']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsIndex3(chartDomAct = 'echartsIndex3') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.indexPmCharts({ workshop: 1 }).then(res => {
        const p = res.data.pf
        this.numberPercent1.number3 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#8f87ff', '#e2f0d9', '#ff717d', '#ffa427', '#5c95fe']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsIndex4(chartDomAct = 'echartsIndex4') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.indexPmCharts({ workshop: 2 }).then(res => {
        const p = res.data.pf
        this.numberPercent1.number4 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#8f87ff', '#e2f0d9', '#ff717d', '#ffa427', '#5c95fe']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsIndex5(chartDomAct = 'echartsIndex5') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.indexPmCharts({ workshop: 3 }).then(res => {
        const p = res.data.pf
        this.numberPercent1.number5 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#8f87ff', '#e2f0d9', '#ff717d', '#ffa427', '#5c95fe']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsIndex6(chartDomAct = 'echartsIndex6') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.indexPmCharts({ workshop: 4 }).then(res => {
        const p = res.data.pf
        this.numberPercent1.number6 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#8f87ff', '#e2f0d9', '#ff717d', '#ffa427', '#5c95fe']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsIndex7(chartDomAct = 'echartsIndex7') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.indexPmCharts({ workshop: 5 }).then(res => {
        const p = res.data.pf
        this.numberPercent1.number7 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#8f87ff', '#e2f0d9', '#ff717d', '#ffa427', '#5c95fe']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsIndex8(chartDomAct = 'echartsIndex8') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.indexPmCharts({ workshop: 6 }).then(res => {
        const p = res.data.pf
        this.numberPercent1.number8 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#8f87ff', '#e2f0d9', '#ff717d', '#ffa427', '#5c95fe']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsIndex9(chartDomAct = 'echartsIndex9') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts2(this.searchIndex9).then(res => {
        const z = res.data.z
        const f = res.data.f
        z.map(zItem => {
          if (zItem === '') {
            this.$message.error('请先完善每个月的月读指标！')
          }
        })
        this.chartsIndex9Data.categories = [res.data.n, '指标', '平均']
        this.chartsIndex9Data.values = [
          {
            name: res.data.n,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#16ea76',
                lineStyle: {
                  color: '#16ea76',
                  width: 2.5
                }
              }
            },
            data: f
          },
          {
            name: '指标',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#58c6ff',
                lineStyle: {
                  color: '#58c6ff',
                  width: 2.5
                }
              }
            },
            data: res.data.z
          },
          {
            name: '平均',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#ff6262',
                lineStyle: {
                  color: '#ff6262',
                  width: 2.5
                }
              }
            },
            data: res.data.p
          }
        ]
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter(e) {
              return e[0].name + '<br>' + e.map((item) => {
                return `<span class="echarts-span" style="background:${item.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${item.seriesName} ${item.value}%<br>`
              }).join('')
            }
          },
          legend: {
            data: this.chartsIndex9Data.categories,
            bottom: 0
          },
          grid: {
            // left: '3%',
            // right: '4%',
            // bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: false,
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.chartsIndex9Data.month
          },
          yAxis: {
            type: 'value',
            name: '百分比（%）'
          },
          series: this.chartsIndex9Data.values
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsIndex10(chartDomAct = 'echartsIndex10') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts4(this.searchIndex10).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['分钟', '次数'],
            bottom: 0
          },
          xAxis: [
            {
              type: 'category',
              data: res.data.categories,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '分钟'
            },
            {
              type: 'value',
              name: '次数'
            }
          ],
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              name: '分钟',
              type: 'bar',
              data: res.data.minute
            },
            {
              name: '次数',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              data: res.data.times
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    // 自主保全类
    chartsSecond1(chartDomAct = 'echartsSecond1') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 0 }).then(res => {
        const p = res.data[0].value
        this.numberPercent2.number1 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsSecond2(chartDomAct = 'echartsSecond2') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 0, workshop: 0 }).then(res => {
        const p = res.data[0].value
        this.numberPercent2.number2 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsSecond3(chartDomAct = 'echartsSecond3') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 0, workshop: 1 }).then(res => {
        const p = res.data[0].value
        this.numberPercent2.number3 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsSecond4(chartDomAct = 'echartsSecond4') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 0, workshop: 2 }).then(res => {
        const p = res.data[0].value
        this.numberPercent2.number4 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsSecond5(chartDomAct = 'echartsSecond5') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 0, workshop: 3 }).then(res => {
        const p = res.data[0].value
        this.numberPercent2.number5 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsSecond6(chartDomAct = 'echartsSecond6') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 0, workshop: 4 }).then(res => {
        const p = res.data[0].value
        this.numberPercent2.number6 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsSecond7(chartDomAct = 'echartsSecond7') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 0, workshop: 5 }).then(res => {
        const p = res.data[0].value
        this.numberPercent2.number7 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsSecond8(chartDomAct = 'echartsSecond8') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 0, workshop: 6 }).then(res => {
        const p = res.data[0].value
        this.numberPercent2.number8 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Second1(chartDomAct = 'echarts2Second1') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 1 }).then(res => {
        const p = res.data[0].value
        this.numberPercent3.number1 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>工厂自主维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Second2(chartDomAct = 'echarts2Second2') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 1, workshop: 0 }).then(res => {
        const p = res.data[0].value
        this.numberPercent3.number2 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>冲压车间自主维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Second3(chartDomAct = 'echarts2Second3') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 1, workshop: 1 }).then(res => {
        const p = res.data[0].value
        this.numberPercent3.number3 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>车身车间自主维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Second4(chartDomAct = 'echarts2Second4') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 1, workshop: 2 }).then(res => {
        const p = res.data[0].value
        this.numberPercent3.number4 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>涂装车间自主维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Second5(chartDomAct = 'echarts2Second5') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 1, workshop: 3 }).then(res => {
        const p = res.data[0].value
        this.numberPercent3.number5 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>总装车间自主维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Second6(chartDomAct = 'echarts2Second6') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 1, workshop: 4 }).then(res => {
        const p = res.data[0].value
        this.numberPercent3.number6 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>生产管理部自主维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Second7(chartDomAct = 'echarts2Second7') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 1, workshop: 5 }).then(res => {
        const p = res.data[0].value
        this.numberPercent3.number7 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>质量部自主维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Second8(chartDomAct = 'echarts2Second8') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 1, workshop: 6 }).then(res => {
        const p = res.data[0].value
        this.numberPercent3.number8 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>设备动力部自主维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '自主点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Second1(chartDomAct = 'echarts3Second1') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.applyCharts().then(res => {
        this.second.number1 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>工厂报修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '工厂报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#5c95fe', '#ffa427', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Second2(chartDomAct = 'echarts3Second2') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.applyCharts({ workshop: 94 }).then(res => {
        this.second.number2 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>冲压车间报修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '冲压车间报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#5c95fe', '#ffa427', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Second3(chartDomAct = 'echarts3Second3') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.applyCharts({ workshop: 97 }).then(res => {
        this.second.number3 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>车身车间报修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '车身车间报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#5c95fe', '#ffa427', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Second4(chartDomAct = 'echarts3Second4') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.applyCharts({ workshop: 96 }).then(res => {
        this.second.number4 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>涂装车间报修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '涂装车间报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#5c95fe', '#ffa427', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Second5(chartDomAct = 'echarts3Second5') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.applyCharts({ workshop: 95 }).then(res => {
        this.second.number5 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>总装车间报修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '总装车间报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#5c95fe', '#ffa427', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Second6(chartDomAct = 'echarts3Second6') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.applyCharts({ workshop: 93 }).then(res => {
        this.second.number6 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>生产管理部报修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '生产管理部报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#5c95fe', '#ffa427', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Second7(chartDomAct = 'echarts3Second7') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.applyCharts({ workshop: 92 }).then(res => {
        this.second.number7 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>质量部报修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '质量部报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#5c95fe', '#ffa427', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Second8(chartDomAct = 'echarts3Second8') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.applyCharts({ workshop: 91 }).then(res => {
        this.second.number8 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>设备动力部报修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '设备动力部报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data.p,
              color: ['#5c95fe', '#ffa427', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    // 94 97 96 95 92 93 91
    // 专业保全
    chartsThird1(chartDomAct = 'echartsThird1') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 4 }).then(res => {
        const p = res.data[0].value
        this.numberPercent4.number1 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsThird2(chartDomAct = 'echartsThird2') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 4, workshop: 0 }).then(res => {
        const p = res.data[0].value
        this.numberPercent4.number2 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsThird3(chartDomAct = 'echartsThird3') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 4, workshop: 1 }).then(res => {
        const p = res.data[0].value
        this.numberPercent4.number3 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsThird4(chartDomAct = 'echartsThird4') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 4, workshop: 2 }).then(res => {
        const p = res.data[0].value
        this.numberPercent4.number4 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsThird5(chartDomAct = 'echartsThird5') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 4, workshop: 3 }).then(res => {
        const p = res.data[0].value
        this.numberPercent4.number5 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsThird6(chartDomAct = 'echartsThird6') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 4, workshop: 4 }).then(res => {
        const p = res.data[0].value
        this.numberPercent4.number6 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsThird7(chartDomAct = 'echartsThird7') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 4, workshop: 5 }).then(res => {
        const p = res.data[0].value
        this.numberPercent4.number7 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsThird8(chartDomAct = 'echartsThird8') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 4, workshop: 6 }).then(res => {
        const p = res.data[0].value
        this.numberPercent4.number8 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业点检完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Third1(chartDomAct = 'echarts2Third1') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 2 }).then(res => {
        const p = res.data[0].value
        this.numberPercent5.number1 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>工厂专业维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业维护完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Third2(chartDomAct = 'echarts2Third2') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 2, workshop: 0 }).then(res => {
        const p = res.data[0].value
        this.numberPercent5.number2 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>冲压车间专业维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业维护完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Third3(chartDomAct = 'echarts2Third3') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 2, workshop: 1 }).then(res => {
        const p = res.data[0].value
        this.numberPercent5.number3 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>车身车间专业维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业维护完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Third4(chartDomAct = 'echarts2Third4') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 2, workshop: 2 }).then(res => {
        const p = res.data[0].value
        this.numberPercent5.number4 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>涂装车间专业维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业维护完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Third5(chartDomAct = 'echarts2Third5') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 2, workshop: 3 }).then(res => {
        const p = res.data[0].value
        this.numberPercent5.number5 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>总装车间专业维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业维护完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Third6(chartDomAct = 'echarts2Third6') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 2, workshop: 4 }).then(res => {
        const p = res.data[0].value
        this.numberPercent5.number6 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>生产管理部专业维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业维护完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Third7(chartDomAct = 'echarts2Third7') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 2, workshop: 5 }).then(res => {
        const p = res.data[0].value
        this.numberPercent5.number7 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>质量部专业维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业维护完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts2Third8(chartDomAct = 'echarts2Third8') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.pmCharts({ plan_category: 2, workshop: 6 }).then(res => {
        const p = res.data[0].value
        this.numberPercent5.number8 = p === null ? 0 : p + '%'
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>设备动力部专业维护完成率</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}%`
            }
          },
          legend: {
            // orient: 'vertical',
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '专业维护完成率',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '45%'],
              data: res.data,
              color: ['#e2f0d9', '#ff717d']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Third1(chartDomAct = 'echarts3Third1') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.cmCharts().then(res => {
        this.third.number1 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>工厂维修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '工厂报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '35%'],
              data: res.data.p,
              // color: ['#28d4a', '#e2f0d9', '#8f87ff', '#ff717d', '#ffa427', '#5c95fe', '#28d4a']
              color: ['#ff717d', '#ffa427', '#8f87ff', '#f5f93f', '#72c0de', '#5c95fe', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Third2(chartDomAct = 'echarts3Third2') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.cmCharts({ workshop: 0 }).then(res => {
        this.third.number2 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>冲压车间维修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '工厂报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '35%'],
              data: res.data.p,
              // color: ['#28d4a', '#e2f0d9', '#8f87ff', '#ff717d', '#ffa427', '#5c95fe', '#28d4a']
              color: ['#ff717d', '#ffa427', '#8f87ff', '#f5f93f', '#72c0de', '#5c95fe', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Third3(chartDomAct = 'echarts3Third3') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.cmCharts({ workshop: 1 }).then(res => {
        this.third.number3 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>车身车间维修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '工厂报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '35%'],
              data: res.data.p,
              // color: ['#28d4a', '#e2f0d9', '#8f87ff', '#ff717d', '#ffa427', '#5c95fe', '#28d4a']
              color: ['#ff717d', '#ffa427', '#8f87ff', '#f5f93f', '#72c0de', '#5c95fe', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Third4(chartDomAct = 'echarts3Third4') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.cmCharts({ workshop: 2 }).then(res => {
        this.third.number4 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>涂装车间维修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '工厂报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '35%'],
              data: res.data.p,
              // color: ['#28d4a', '#e2f0d9', '#8f87ff', '#ff717d', '#ffa427', '#5c95fe', '#28d4a']
              color: ['#ff717d', '#ffa427', '#8f87ff', '#f5f93f', '#72c0de', '#5c95fe', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Third5(chartDomAct = 'echarts3Third5') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.cmCharts({ workshop: 3 }).then(res => {
        this.third.number5 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>总装车间维修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '工厂报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '35%'],
              data: res.data.p,
              // color: ['#28d4a', '#e2f0d9', '#8f87ff', '#ff717d', '#ffa427', '#5c95fe', '#28d4a']
              color: ['#ff717d', '#ffa427', '#8f87ff', '#f5f93f', '#72c0de', '#5c95fe', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Third6(chartDomAct = 'echarts3Third6') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.cmCharts({ workshop: 4 }).then(res => {
        this.third.number6 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>生产管理部维修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '工厂报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '35%'],
              data: res.data.p,
              // color: ['#28d4a', '#e2f0d9', '#8f87ff', '#ff717d', '#ffa427', '#5c95fe', '#28d4a']
              color: ['#ff717d', '#ffa427', '#8f87ff', '#f5f93f', '#72c0de', '#5c95fe', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Third7(chartDomAct = 'echarts3Third7') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.cmCharts({ workshop: 5 }).then(res => {
        this.third.number7 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>质量部维修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '工厂报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '35%'],
              data: res.data.p,
              // color: ['#28d4a', '#e2f0d9', '#8f87ff', '#ff717d', '#ffa427', '#5c95fe', '#28d4a']
              color: ['#ff717d', '#ffa427', '#8f87ff', '#f5f93f', '#72c0de', '#5c95fe', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    charts3Third8(chartDomAct = 'echarts3Third8') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.cmCharts({ workshop: 6 }).then(res => {
        this.third.number8 = res.data.sum
        const option = {
          tooltip: {
            trigger: 'item',
            formatter(e) {
              return `<span>设备动力部维修</span><br><span class="echarts-span" style="background:${e.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${e.data.name}：${e.data.value}`
            }
          },
          legend: {
            bottom: 0,
            width: 200
          },
          series: [
            {
              name: '工厂报修',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '35%'],
              data: res.data.p,
              // color: ['#28d4a', '#e2f0d9', '#8f87ff', '#ff717d', '#ffa427', '#5c95fe', '#28d4a']
              color: ['#ff717d', '#ffa427', '#8f87ff', '#f5f93f', '#72c0de', '#5c95fe', '#e2f0d9']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsThirdB1(chartDomAct = 'echartsThirdB1') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts7(this.searchThirdB1).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['分钟', '次数'],
            bottom: 0
          },
          xAxis: [
            {
              type: 'category',
              data: res.data.categories,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '分钟'
            },
            {
              type: 'value',
              name: '次数'
            }
          ],
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              name: '分钟',
              type: 'bar',
              data: res.data.minute
            },
            {
              name: '次数',
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              yAxisIndex: 1,
              data: res.data.times
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsThirdB2(chartDomAct = 'echartsThirdB2') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts9(this.searchThirdB2).then(res => {
        console.log(res)
        this.chartsThirdB2Data.minute = res.data
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter(e) {
              const item = e[0]
              let name = ''
              if (item.name === '动力') {
                name = '动力维修班'
              } else {
                name = item.name + '保全班'
              }
              return `<span class="echarts-span">${name}：</br>${item.value}分钟</span>`
            }
          },
          xAxis: {
            type: 'category',
            data: this.chartsThirdB2Data.categories
          },
          yAxis: {
            type: 'value',
            name: '（分钟）'
          },
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              data: this.chartsThirdB2Data.minute,
              type: 'bar'
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    // 备件类
    chartsParts1(chartDomAct = 'echartsParts1') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts12(this.searchParts1).then(res => {
        this.chartsParts1Data.circle = res.data
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Top10备件',
              type: 'pie',
              radius: ['40%', '70%'],
              data: this.chartsParts1Data.circle,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsParts2(chartDomAct = 'echartsParts2') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts13(this.searchParts2).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['金额（元）', '数量（个）'],
            bottom: 0
          },
          xAxis: [
            {
              type: 'category',
              data: this.chartsParts2Data.x,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '金额（元）'
            },
            {
              type: 'value',
              name: '数量（个）'
            }
          ],
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              name: '金额（元）',
              type: 'bar',
              data: res.data.price
            },
            {
              name: '数量（个）',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              data: res.data.number
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsParts3(chartDomAct = 'echartsParts3') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts14(this.searchParts3).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['金额（元）', '数量（个）'],
            bottom: 0
          },
          xAxis: [
            {
              type: 'category',
              data: this.chartsParts4Data.x,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '金额（元）'
            },
            {
              type: 'value',
              name: '数量（个）'
            }
          ],
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              name: '金额（元）',
              type: 'bar',
              data: res.data.price
            },
            {
              name: '数量（个）',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              data: res.data.number
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    chartsParts4(chartDomAct = 'echartsParts4') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts15(this.searchParts4).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['金额（元）', '数量（个）'],
            bottom: 0
          },
          xAxis: [
            {
              type: 'category',
              data: this.chartsParts4Data.x,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '金额（元）'
            },
            {
              type: 'value',
              name: '数量（个）'
            }
          ],
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              name: '金额（元）',
              type: 'bar',
              data: res.data.price
            },
            {
              name: '数量（个）',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              data: res.data.number
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    // 清空选择框
    factoryChange10(value) {
      if (value !== this.queryWorkshop10) {
        this.searchIndex10.member = null
        this.queryWorkshop10 = value
      }
    },
    tabEcharts(e) {
      if (e.index === '0') {
        this.index1()
      } else if (e.index === '1') {
        this.index2()
      } else if (e.index === '2') {
        this.index3()
      } else if (e.index === '3') {
        this.index4()
      }
    }
  }
}
</script>

<style scoped>
.charts-wrap{
  box-sizing: border-box;
  background-color: #dfe4ed;
}
.charts-wrap .workshop-charts-common{
  height: 350px;
  background-color: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}
.charts-wrap .workshop-charts-common .right-icon {
  width: 20px;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 20px;
  cursor: pointer;
}
.bigCharts{
  width: 100%;
  height: 500px;
}
.condition{
  text-align: center;
}
.condition .select-div{
  display: inline-block;
}
.echarts-spans{
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
}
.footer{
  margin-top: 20px;
  text-align: center;
}
.second.re{position: relative;}
.second .ab{width: 100%; text-align: center; position: absolute; left: 0; right: 0; top: 45%;}
.second .abs{width: 100%; text-align: center; position: absolute; left: 0; right: 0; top: 35%;}
.workshop-title{
  text-align: center;
}
</style>
<style>
.el-tabs__content{
  padding: 0 !important;
}
</style>
